<html>
	<head>
		<meta charset="utf-8"></meta>
		<title>Welcome to The Wall - Register</title>
		<!--	<link rel="stylesheet" href="css/wallregistration.css" media="Screen" /> -->
		<!-- 		<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> -->
		<link rel='icon' type='image/png' href='http://images1.wikia.nocookie.net/__cb20100130121653/farmville/images/a/a0/Brick-icon.png' />
		<link rel="stylesheet" href="css/bootstrap.css"/>
		
		<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
		<script id="bootScript">
		
		
		
		setInterval(askBricks, 5000)
		
		function askBricks(){
			
			var xmlhttp = new XMLHttpRequest()
			xmlhttp.open("GET", location.href + "/../getBricks", true);
			xmlhttp.onload = function () {
				if (xmlhttp.readyState = 4) {  
					var resp = xmlhttp.response 
					document.getElementById("bricks").innerHTML = resp
					}
				else {document.getElementById("bricks").innerHTML = "merda"}
			}
			
			xmlhttp.send()	
		}
			function loadScript(url, callback) {
				var script = document.createElement("script")
				script.type = "text/javascript";
				if(script.readyState) {//IE
					script.onreadystatechange = function() {
						if(script.readyState == "loaded" || script.readyState == "complete") {
							script.onreadystatechange = null;
							callback();
						}
					};
				} else {//Others
					script.onload = function() {
						if(callback)
							callback();
					}
				}
				script.src = url;
				document.getElementsByTagName("head")[0].appendChild(script);
			}

			loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js", function() {
				loadScript("/lib/bootstrap/js/bootstrap.js", function() {
					loadScript("/lib/bootstrap/js/bootstrapMin.js", function() {
						loadScript("/javaScript/misc.js")
					})
				})
			})
			
			 function setAction(){
			 	console.log('setaction')
				var form = document.getElementById('brickForm')
				console.log('content ' + document.getElementById('brick-textarea').innerHTML)
				var action = 'http://' + location.host + '../postBrick?userID=' + document.getElementById('userID').innerHTML + '&amp;text=' + document.getElementById('brick-textarea').value
				console.log(action)
				form.setAttribute('action', 'http://' + location.host + '../postBrick?userID=' + document.getElementById('userID').innerHTML + '&amp;text=' + document.getElementById('brick-textarea').value)
			 }
			
			function postBrick(){
				var postreq = new XMLHttpRequest()
				var userID = encodeURIComponent(document.getElementById('userID').innerHTML)
				var content = encodeURIComponent(document.getElementById('brick-textarea').value)
				document.getElementById('brick-textarea').value = ""
				document.getElementById('counterChar').innerHTML = '130'
				//console.log(userID)
				//console.log(content)
				var parameters = 'userID=' + userID + '&amp;content=' + content
				postreq.open('POST', 'http://' + location.host + '/postBrick', true)
				postreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
				postreq.send(parameters)
				//postreq.send()
				
			}
			
			function showPopover(id){
				//console.log(id)
				var userID = id.split('-')[1]
				//console.log(userID)
				var xmlhttp = new XMLHttpRequest()
				xmlhttp.open('GET', 'http://'+location.host+'/getUserData?userID='+userID)
				xmlhttp.onload = function() {
					if(xmlhttp.readyState == 4) {
						$("#"+id).popover({placement:'right',
											content: xmlhttp.response});
					}
				}
				xmlhttp.send()
			};  
		
			
		</script>
	</head>
	<body onload='setAction()'><!-- onload='setAction()' -->
		<div class="container">
			<div class="row">
				<br></br><h1>the wall</h1>
			</div>
			<div class="row">
				<br></br>
				<div class="span3">
					<br/>
					<form id='brickForm' class="well" onsubmit='postBrick(); askBricks()'>
						<label>Hello, <strong><content></content></strong></label>
						<textarea name="brick-textarea" id='brick-textarea' class="input-medium" placeholder="Put a brick on the wall..." onkeydown="setAction(); return checkChar(event, this)" ></textarea>
						<span class="help-block" id="counterChar">130</span>
						<button type="submit" class="btn btn-success">
							Submit
						</button>
					</form>
				</div>
				<br></br>
				<div class="span1">
					
				</div>
				<div class="span8" id="bricks" style="overflow-y:scroll; height:500px; overflow-x:hidden; border: solid 1px; rgba(0, 0, 0, 0.5); #EEE; border-radius: 4px">
					Bricks are being loaded...
				</div>
			</div>
			</div>

</body>
</html>